<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { loginFormData, loginForm } = storeToRefs(userStore);
const { login, rePwdRules, clearPwd } = userStore;
</script>

<template>
  <el-container>
    <div id="main">
      <el-aside></el-aside>
      <el-main>
        <!-- 登录表单 -->
        <el-form :model="loginFormData" :rules="rePwdRules" ref="loginForm">
          <el-form-item><h1>登录</h1></el-form-item>
          <el-form-item prop="employeeId"
            ><el-input
              v-model="loginFormData.employeeId"
              :prefix-icon="User"
              placeholder="请输入ID号"
          /></el-form-item>
          <el-form-item prop="password"
            ><el-input
              v-model="loginFormData.password"
              :prefix-icon="Lock"
              placeholder="请输入密码"
          /></el-form-item>
          <el-form-item>
            <!-- <span class="forget" @click="clearPwd">忘记密码?</span> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login"
              >登录</el-button
            ></el-form-item
          >
        </el-form>
      </el-main>
    </div>
  </el-container>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #81a48b;
}
.el-container {
  width: 100vw;
  height: 100vh;
}
#main {
  width: 70vw;
  height: 60vh;
  margin: 20vh auto;
  display: flex;
}
.el-aside {
  width: 65%;
  height: 100%;
  background: url("@/assets/bg.webp") no-repeat center center / cover;
  border-top-left-radius: 0.5vw;
  border-bottom-left-radius: 0.5vw;
}
.el-main {
  height: 100%;
  width: 20%;
  background: whitesmoke;
  border-top-right-radius: 0.5vw;
  border-bottom-right-radius: 0.5vw;
}
.el-form {
  width: 90%;
  height: 45vh;
  margin: 7vh auto 1vh;
  background: white;
}
.el-form-item:nth-child(2) {
  margin-top: 3vw;
}
.el-form-item {
  width: 100%;
  height: 2.5vw;
  margin-top: 1vw;
  background: white;
}
h1 {
  font-size: 1.5vw;
  line-height: 2.5vw;
  padding: 1vw 1.5vw;
  background: white;
  width: 100%;
  height: 100%;
}
.el-input {
  width: 100%;
  height: 100%;
  font-size: 1vw;
}
.el-checkbox {
  margin-left: 2vw;
  background: white;
}
.forget {
  color: #409eff;
  margin-left: 18vw;
  cursor: pointer;
  background: white;
}
.el-form-item .el-button {
  width: 100%;
  height: 100%;
  font-size: 1.3vw;
  letter-spacing: 1vw;
  background-color: #409eff;
}
h2 {
  font-size: 1vw;
  color: gray;
  font-weight: normal;
  margin-left: 1vw;
}
h2:hover {
  cursor: pointer;
  color: rgb(152, 150, 150);
}

#footer {
  font-size: 0.8vw;
  color: gray;
  background-color: whitesmoke;
  margin-left: 1vw;
}
</style>
